<template>
  <!-- 知识图谱 -->
  <div id="atlas"></div>
</template>

<script>
// 在 main 中追加 echarts：
export default {
  props: {
    // 关系网：
    relation: {
      default: () => {
        return {
          nodes: {},
          links: {},
        };
      },
    },
    // 配置参数集合：
    setObj: {
      default: () => {
        return {
          text: "", //整个图谱的名称，可以为空
          // 整个图谱的参员：
          nodes: [
            {
              name: "蔡英文",
              category: 0,
            },
            {
              name: "陈水扁",
              category: 1,
            },
            {
              name: "111",
              category: 1,
            },
          ],
          // 箭头逻辑：
          links: [
            {
              source: "陈水扁",
              target: "蔡英文",
              name: "同事",
              color: 0, //对应 linksColors 颜色的索引值
            },
            {
              source: "111",
              target: "蔡英文",
              name: "朋友",
              color: 0, //对应 linksColors 颜色的索引值
            },
          ],
          // 图谱层级-名称：
          kind: ["人物", "组织", "军事", "武器"],
          // 图谱层级颜色：依次递减
          colors: ["#006acc", "#ff7d18", "#10a050"],
          // 线的颜色：依次递减
          linksColors: ["#006acc", "#ff7d18", "#10a050"],
        };
      },
    },
  },
  data() {
    return {
      tooltipData: [],
    };
  },
  methods: {
    // 请求关系属性数据
    // getLineData(id) {
    //   console.log("id 是谁", id);
    //   this.$api.getProperty(id).then((res) => {
    //     console.log("这是什么：", res);
    //     this.tooltipData = res;
    //   });
    // },
    // 配置：
    atlasFun(data) {
      let that = this;
      // console.log("哒哒哒大", data);
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("atlas"));
      let d = {
        nodes: [],
        links: [],
      };
      // 循环：
      data.nodes.forEach((node, idx) => {
        // console.log(node);
        let n = {
          name: node.name, // 名字
          symbolSize: 50,
          // x: idx * 2,
          // y: 10 + idx,
          // itemStyle: node.style,
          // symbolOffset: [idx * 2, idx * 2],
          itemStyle: {
            //有值就赋值，没值就 红色
            color: data.colors[node.category] || "red",
            borderColor: "#b8babb",
            id: node.id,
          },
        };
        // 追加
        d.nodes.push(n);
      });

      data.links.forEach((link, idx) => {
        let l = {
          source: link.source, //箭头出发点
          target: link.target, //箭头指向点
          name: link.name, //箭头上的文字
          id: link.id,
          label: {
            align: "center",
            fontSize: 10,
          },
          // 对应颜色赋值
          lineStyle: {
            color: data.linksColors[link.color],
          },
        };
        // 追加
        d.links.push(l);
      });
      let categories = [];
      // 循环
      data.kind.forEach((item, idx) => {
        let a = {
          name: item,
          itemStyle: {
            color: data.colors[idx],
          },
        };
        categories.push(a);
      });
      let option = {
        // 标题
        title: {
          text: data.text,
        },
        tooltip: {
          show: true,
          backgroundColor: "rgba(255, 255, 255, 0.5)",
          // showDelay: 500,
          // position: ['100%', '10%'],
          // formatter:function(params){
          //   console.log(params);
          // }
          formatter: function (params) {
            if (params.data.id) {
              // console.log("线：", params.data.id);
              // 线的赋值：
              that.tooltipData = that.relation.links[params.data.id] || [];
              let toolArr = [];
              // 线的显示：
              that.tooltipData.map((item) => {
                toolArr.push(
                  "<div style='margin:5px 0;'>" +
                    // params.marker
                    item.key +
                    "：" +
                    "<span style='  font-weight: bold;'>" +
                    item.value +
                    "</span>" +
                    "<div>"
                );
              });
              return (
                "<div style='" +
                " color: black; box-sizing: border-box;padding: 10px;background: rgba(255, 255, 255, 0.8);border-radius: 6px;border: 2px solid #8fa4ce;" +
                "' >" +
                toolArr.join("") +
                "</div>"
              );
            }
            if (params.data.itemStyle.id) {
              // 个体赋值：
              that.tooltipData = that.relation.nodes[params.data.itemStyle.id] || [];
              let toolArr = [];
              // 图例自身的显示：
              that.tooltipData.map((item) => {
                toolArr.push(
                  "<div style='margin:5px 0;'>" +
                    params.marker +
                    item.key +
                    "：" +
                    "<span style='  font-weight: bold;'>" +
                    item.value +
                    "</span>" +
                    "<div>"
                );
              });
              return (
                "<div style='" +
                " color: black; box-sizing: border-box;padding: 10px;background: rgba(255, 255, 255, 0.8);border-radius: 6px;border: 2px solid #8fa4ce;" +
                "' >" +
                toolArr.join("") +
                "</div>"
              );
            }
          },
        },
        grid: {
          top: "10px",
          left: "0px",
        },
        legend: [
          {
            show: false,
            selectedMode: "single",
            data: categories.map((x) => x.name),
            icon: "circle",
            top: "20px",
          },
        ],
        series: [
          {
            type: "graph",
            // layout: "circular",
            layout: "force",
            symbolSize: 58,
            draggable: true,
            roam: true,
            focusNodeAdjacency: true,
            categories: categories,
            edgeSymbol: ["arrow", ""],
            //edgeSymbolSize: [80, 10],
            edgeLabel: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 12,
                },
                formatter(x) {
                  return x.data.name;
                },
              },
            },
            // 字体是否显示
            label: {
              show: true,
              color: "#333",
            },
            force: {
              repulsion: 600,
              edgeLength: 120,
              friction: 0.1, //这个参数能减缓节点的移动速度。取值范围 0 到 1
              // layoutAnimation: false, //动画关闭，一旦数据多了，会让网页假死
            },
            data: d.nodes,
            links: d.links,
          },
        ],
      };
      // 鼠标事件
      // myChart.on("mouseover", function (params) {
      //   console.log(params.data);
      //   console.log(this.data);
      // });
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {
    if (!this.myChart) {
      return;
    }
    window.removeEventListener("resize", this.myChart);
    this.myChart.dispose();
    this.myChart = null;
  },
  updated() {
    this.atlasFun(this.setObj);
  },
  mounted() {
    // console.log("555555555", this.setObj);
  },
  computed: {},
  watch: {
    setObj: {
      deep: true,
      handler(val) {
        this.atlasFun(val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
#atlas {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 20px 20px 20px 100px;
}
.tool_box {
  box-sizing: border-box;
  padding: 20px;
  background: rgba(248, 249, 252, 0.5);
  border-radius: 6px;
  border: 2px solid #8fa4ce;
  color: black;
  // color: #20c17c
  font-weight: bold;
}
</style>
